function insertBlank(n) {
  let str = ''
  let i = 0
  while (i < n) {
    i++
    str += '&nbsp;'
  }
  return str
}

// eslint-disable-next-line complexity
const getHtmlStr = ({ risk, createTime, quotaDetail, maps, quotaList, analysis, suggestions, evaluateTotal }, title, topoView) => {
  return `<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>${title}</title>
</head>
<body>
<div style="
        font-weight: bold;
        font-size: 18px;
        box-sizing: border-box;
        padding-bottom: 20px;
        border-bottom: 1px solid rgba(112, 112, 112, 0.19);">评估报告：${title}</div>
<div style="
        background: #F7F8FA;
        padding: 20px;">
    <div style="
        width: 100%;
        height: 56px;
        line-height: 50px;
        display: flex;
        border-bottom: 1px solid rgba(112, 112, 112, 0.19);">
        <span style="flex: 1">
            <span style="font-weight: bold;font-size: 14px;">综合评分：</span>
            <span style="font-size: 14px; color: #D14040;">${ evaluateTotal === null ? '-' : evaluateTotal}</span>
        </span>
        ${insertBlank(5)}
        <span style="flex: 1">
            <span style="font-weight: bold;font-size: 14px;">风险等级：</span>
            <span style="font-size: 14px; color: #D14040;">${risk === null ? '-' : risk}</span>
        </span>
        ${insertBlank(5)}
        <span style="flex: 1">
            <span style="font-weight: bold;font-size: 14px;">评估时间：</span>
            <span style="font-size: 14px">${createTime}</span>
        </span>
    </div>
    
    <div style="display: ${ maps&&maps.length ? 'flex' : 'none'};align-items: center;">
        <div style="width: 4px;
                    height: 22px;
                    background: #1E5EFF;
                    margin: 20px 5px;"></div>
        <div style="line-height: 50px; font-weight: bold">近期报告得分</div>
        <br>
    </div>
    <table border="1" cellspacing="0" cellpadding="10" style="display: ${ maps&&maps.length ? '' : 'none'}">
      <tbody>
          <tr>
              ${((list) => {
    return list.map(item => {
      return `
                                <td style="text-align: center">${item.date}</td>
                            `
    }).join('')
  })(maps)}
              </tr>
              <tr>
                  ${((list) => {
    return list.map(item => {
      return `
                                <td style="text-align: center">${item.score}</td>
                            `
    }).join('')
  })(maps)}
              </tr>
          </tbody>
      </table>
    
    
    <div style="display: flex;align-items: center;">
        <div style="width: 4px;
                    height: 22px;
                    background: #1E5EFF;
                    margin: 20px 5px;"></div>
        <div style="line-height: 50px; font-weight: bold">风险判定明细</div>
        <br>
    </div>
    <table border="1" cellspacing="0" cellpadding="10">
      <thead>
        <tr>
          ${topoView? '<th>连接名称</th>' : ''}
          <th>判定对象</th>
          <th>权重系数</th>
          <th>实际值</th>
          <th>评估得分(低于60为异常状态)</th>
        </tr>
      </thead>
      <tbody>
      ${((list) => {
    return list.map(item => {
      return `<tr>
                        ${topoView ? `<td style="text-align: center">${item.nodeName}</td>` : ''}
                        <td style="text-align: center">${item.quotaName}</td>
                        <td style="text-align: center">${item.weightRatio}</td>
                        <td style="text-align: center">${item.realValue}</td>
                        <td style="text-align: center; ${item.evaluateValue < 60 ? 'color: #D14040' : ''}">${item.evaluateValue}</td>
                    </tr>`
    }).join('')
  })(quotaDetail)}
      </tbody>
    </table>
    ${quotaList ?
    `<div style="display: flex;align-items: center;">
        <div style="width: 4px;
                    height: 22px;
                    background: #1E5EFF;
                    margin: 20px 5px;"></div>
        <div style="line-height: 50px; font-weight: bold">模板无效指标（在设备中无对应数据）</div>
    </div>
    <div style="
                min-height: 30px;
                padding: 10px 45px;
                box-sizing: border-box;
                background: #F7F8FA;">
        <div class="cell"> ${quotaList.join('，')} </div>
    </div>` : ''}   
    <div style="display: flex;align-items: center;">
        <div style="width: 4px;
                    height: 22px;
                    background: #1E5EFF;
                    margin: 20px 5px;"></div>
        <div style="line-height: 50px; font-weight: bold">问题分析</div>
    </div>
    <div style="padding-left: 60px;line-height: 30px;">${
  analysis ? analysis.split('#%&').map((text, index) => {
    return `<p>${index + 1}、${text}</p>`
  }).join('') : '暂无'
}</div>
    <div style="display: flex;align-items: center;">
        <div style="width: 4px;
                    height: 22px;
                    background: #1E5EFF;
                    margin: 20px 5px;"></div>
        <div style="line-height: 50px; font-weight: bold">处理建议</div>
    </div>
    <div style="padding-left: 60px;line-height: 30px;">${
  suggestions ? suggestions.split('#%&').map((text, index) => {
    return `<p>${index + 1}、${text}</p>`
  }).join('') : '暂无'
}</div>
</div>
</body>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    body {
        padding: 20px;
        box-sizing: border-box;
        width: 100vw;
        height: 100vh;
        color: #616164;
    }
    .flex-row {
        display: flex;
    }
    .flex1 {
        flex: 1;
    }
    table{
        padding: 0 50px;
        border: 1px solid rgba(112, 112, 112, 0.19);
        width:100%;
        box-sizing: border-box;
        border-collapse:collapse;
        border-spacing:0;
    }
    
    tr td,tr th{
        text-align: center;
        word-break: break-all; /*允许在字内换行,即单词可分*/
        word-wrap:break-word;/*允许长单词或URL地址换行*/
        font:500 14px Arial;
        line-height: 40px;
    }
    tr {
        border-bottom: 1px solid rgba(112, 112, 112, 0.19); 
    }
    tbody>tr:last-child {
        border: none;
    }
</style>
</html>`
}

export { getHtmlStr }